Bubble Chart একটি শক্তিশালী ডেটা ভিজ্যুয়ালাইজেশন টুল যা তিনটি ভেরিয়েবলের মধ্যে সম্পর্ক এবং ডেটার গতি, আকার বা অবস্থান দেখানোর জন্য ব্যবহৃত হয়। এটি সাধারণত সেলস ডেটা, মার্কেটিং ক্যাম্পেইন, বা কোনো প্রকার ডেটা বিশ্লেষণের জন্য ব্যবহৃত হয় যেখানে তিনটি ভেরিয়েবলের মধ্যে সম্পর্ক দেখা প্রয়োজন।
Bubble Chart প্রতিটি বুদ্বুদকে একটি X অক্ষ, Y অক্ষ এবং Bubble Size দ্বারা নির্ধারণ করে।
১. Google Charts দিয়ে Bubble Chart তৈরি করা
Bubble Chart তৈরি করতে আপনাকে প্রথমে Google Charts লাইব্রেরি লোড করতে হবে এবং তারপর ডেটাকে একটি টেবিল ফরম্যাটে প্রস্তুত করতে হবে, যেখানে তিনটি ভেরিয়েবল (এক্স, ওয়াই, সাইজ) থাকবে।
HTML এবং JavaScript কোড উদাহরণ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Bubble Chart Example</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Google Charts লোড করা
google.charts.load('current', {packages: ['corechart', 'bubble']});
// কলব্যাক ফাংশন
google.charts.setOnLoadCallback(drawChart);
// Bubble Chart তৈরি করার ফাংশন
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addColumn('number', 'Size');
data.addColumn('string', 'Category');
// ডেটা প্রস্তুত করা
data.addRows([
[80, 167, 120, 'Category 1'],
[79, 136, 130, 'Category 2'],
[78, 154, 140, 'Category 3'],
[81, 151, 150, 'Category 4'],
[82, 145, 160, 'Category 5'],
[77, 129, 170, 'Category 6'],
[85, 150, 180, 'Category 7']
]);
var options = {
title: 'Bubble Chart Example',
hAxis: {title: 'X Axis (Value)'},
vAxis: {title: 'Y Axis (Value)'},
bubble: {textStyle: {fontSize: 11}},
legend: { position: 'none' },
tooltip: { isHtml: true }
};
var chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2>Google Bubble Chart Example</h2>
<div id="bubble_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
কোড ব্যাখ্যা
Google Charts লাইব্রেরি লোড করা: প্রথমে আমরা Google Charts লাইব্রেরি লোড করি, এবং এখানে corechart এবং bubble প্যাকেজ লোড করেছি, যা Bubble Chart তৈরি করতে সাহায্য করবে।
google.charts.load('current', {packages: ['corechart', 'bubble']});ডেটা প্রস্তুত করা:
google.visualization.DataTable()এর মাধ্যমে একটি ডেটা টেবিল তৈরি করা হয়, যেখানে তিনটি কলাম থাকে:- X (এক্স অক্ষের মান)
- Y (ওয়াই অক্ষের মান)
- Size (বুদ্বুদগুলোর আকার)
- Category (ক্যাটেগরি বা বিভাগ)
data.addColumn('number', 'X'); data.addColumn('number', 'Y'); data.addColumn('number', 'Size'); data.addColumn('string', 'Category');ডেটা যোগ করা: এখানে আমরা কিছু উদাহরণ ডেটা যোগ করেছি, যেখানে প্রত্যেকটি বুদ্বুদ তার X, Y এবং Size ভ্যালু নিয়ে তৈরি হয়েছে।
data.addRows([ [80, 167, 120, 'Category 1'], [79, 136, 130, 'Category 2'], [78, 154, 140, 'Category 3'], [81, 151, 150, 'Category 4'], [82, 145, 160, 'Category 5'], [77, 129, 170, 'Category 6'], [85, 150, 180, 'Category 7'] ]);চার্ট অপশন সেট করা: এখানে চার্টের শিরোনাম, অক্ষের টাইটেল, টুলটিপ এবং অন্যান্য কাস্টমাইজেশন করা হয়েছে।
var options = { title: 'Bubble Chart Example', hAxis: {title: 'X Axis (Value)'}, vAxis: {title: 'Y Axis (Value)'}, bubble: {textStyle: {fontSize: 11}}, legend: { position: 'none' }, tooltip: { isHtml: true } };চার্ট তৈরি করা এবং প্রদর্শন:
google.visualization.BubbleChart()ফাংশন দিয়ে চার্ট তৈরি করা হয় এবং এটি HTML ডকুমেন্টে প্রদর্শিত হয়।var chart = new google.visualization.BubbleChart(document.getElementById('bubble_chart')); chart.draw(data, options);
২. Bubble Chart কাস্টমাইজেশন
Google Bubble Chart এর মাধ্যমে আপনি আরো অনেক কাস্টমাইজেশন করতে পারেন:
বুদ্বুদ রঙ পরিবর্তন: আপনি বুদ্বুদগুলোর রঙ কাস্টমাইজ করতে পারেন:
bubble: { opacity: 0.5, stroke: 'green', fill: 'red' }- বুদ্বুদ আকার কাস্টমাইজেশন: আকারের জন্য, আপনি Size এর মান ব্যবহার করতে পারেন এবং সেটিকে আপনার পছন্দ
Read more
